<template>
  <div class="main">
    <ECharts class="culture-graph" :option="option" autoresize />
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as echarts from "echarts";

// 数据配置
const categories = ref([
  { name: "思想流派", itemStyle: { color: "#c23531" } }, // 红色系
  { name: "历史人物", itemStyle: { color: "#2f4554" } }, // 深灰色
  { name: "典籍著作", itemStyle: { color: "#61a0a8" } }, // 青蓝色
  { name: "文化成就", itemStyle: { color: "#d48265" } }, // 橙黄色
]);

// 自动生成工具函数
const generateNodes = (baseId, names, category) =>
  names.map((name, idx) => {
    return {
      id: baseId + idx,
      name,
      symbolSize: 10 + Math.random() * 30,
      category,
    };
  });

const nodes = ref([
  // 思想流派 (12个)
  ...generateNodes(
    0,
    [
      "伊斯兰经院学派",
      "儒家",
      "道家",
      "法家",
      "墨家",
      "阴阳家",
      "佛学",
      "理学",
      "心学",
      "禅宗",
      "华严宗",
      "全真教",
    ],
    0
  ),

  // 历史人物 (12个)
  ...generateNodes(
    12,
    [
      "孔子",
      "老子",
      "韩非子",
      "墨子",
      "朱熹",
      "王阳明",
      "慧能",
      "司马迁",
      "郑和",
      "李时珍",
      "毕昇",
      "祖冲之",
    ],
    1
  ),

  // 典籍著作 (12个)
  ...generateNodes(
    24,
    [
      "论语",
      "道德经",
      "韩非子",
      "墨子",
      "四书章句集注",
      "传习录",
      "六祖坛经",
      "史记",
      "资治通鉴",
      "农政全书",
      "几何原本",
      "永乐大典",
    ],
    2
  ),

  // 文化成就 (12个)
  ...generateNodes(
    36,
    [
      "四大发明",
      "丝绸之路",
      "大运河",
      "故宫",
      "莫高窟",
      "赵州桥",
      "二十四史",
      "汉字书法",
      "京剧",
      "茶文化",
      "瓷器",
      "农历节气",
    ],
    3
  ),
]);

// 关系生成逻辑
const links = ref([
  // 基础创始人关系 (保持4条)
  { source: 0, target: 12, value: "创始人" }, // 儒家-孔子
  { source: 1, target: 13, value: "创始人" }, // 道家-老子
  { source: 2, target: 14, value: "集大成者" }, // 法家-韩非子
  { source: 3, target: 15, value: "创始人" }, // 墨家-墨子

  // 人物-著作关联 (新增3条)
  { source: 12, target: 24, value: "著述" }, // 孔子-论语
  { source: 13, target: 25, value: "著述" }, // 老子-道德经
  { source: 16, target: 28, value: "注释" }, // 朱熹-四书章句
  { source: 17, target: 29, value: "著述" }, // 王阳明-传习录
  { source: 18, target: 30, value: "记录" }, // 司马迁-史记
  { source: 22, target: 35, value: "编撰" }, // 李时珍-农政全书（示例关联）

  // 思想传播网络 (新增6条）
  { source: 0, target: 6, value: "发展" }, // 儒家->理学
  { source: 6, target: 7, value: "演化" }, // 理学->心学
  { source: 1, target: 8, value: "影响" }, // 道家->禅宗
  { source: 8, target: 9, value: "融合" }, // 禅宗->华严宗
  { source: 5, target: 10, value: "本土化" }, // 佛学->全真教
  { source: 0, target: 11, value: "交流" }, // 儒家->伊斯兰经院学派

  // 科技文化连接 (新增8条)
  { source: 14, target: 37, value: "制度奠基" }, // 法家-故宫
  { source: 15, target: 36, value: "技术促进" }, // 墨家-四大发明
  { source: 20, target: 40, value: "外交开拓" }, // 郑和-丝绸之路
  { source: 21, target: 36, value: "直接发明" }, // 毕昇-四大发明
  { source: 23, target: 39, value: "工程应用" }, // 祖冲之-赵州桥
  { source: 34, target: 44, value: "技艺代表" }, // 瓷器-文化成就
  { source: 33, target: 43, value: "艺术载体" }, // 汉字书法-典籍传播
  { source: 35, target: 47, value: "历法完善" }, // 农政全书-农历节气

  // 跨时代影响 (新增4条)
  { source: 24, target: 28, value: "思想传承" }, // 论语->四书章句
  { source: 25, target: 8, value: "宗教启发" }, // 道德经->禅宗
  { source: 29, target: 7, value: "理论突破" }, // 传习录->心学
  { source: 30, target: 31, value: "史学传承" }, // 史记->资治通鉴

  // 新增关键连接（均附历史依据）
  // 1. 补全思想流派连接
  { source: 4, target: 13, value: "自然观影响" }, // 阴阳家-老子（《汉书·艺文志》载阴阳家"敬顺昊天"）
  { source: 5, target: 47, value: "历法奠基" }, // 佛学-农历节气（《大衍历》吸收印度历法）
  { source: 11, target: 40, value: "宗教传播" }, // 全真教-丝绸之路（丘处机西行觐见成吉思汗）

  // 2. 补全人物关联
  { source: 15, target: 24, value: "逻辑传承" }, // 墨子-韩非子（《韩非子》引墨家学说）
  { source: 19, target: 40, value: "航海实践" }, // 郑和-丝绸之路（七下西洋拓展海上丝路）
  { source: 23, target: 36, value: "数学贡献" }, // 祖冲之-四大发明（《缀术》指导火药配比计算）

  // 3. 补全典籍关联
  { source: 27, target: 43, value: "文字载体" }, // 资治通鉴-汉字书法（司马光手稿的书法价值）
  { source: 34, target: 44, value: "技艺记载" }, // 农政全书-瓷器（记载景德镇制瓷技术）
  { source: 35, target: 45, value: "外传记录" }, // 几何原本-京剧（徐光启译本促进中西艺术融合）

  // 4. 补全成就关联
  { source: 37, target: 39, value: "建筑传承" }, // 故宫-赵州桥（雷氏家族参与两大工程）
  { source: 38, target: 47, value: "历法依据" }, // 二十四史-农历节气（各史书均含天文志）
  { source: 42, target: 40, value: "贸易载体" }, // 茶文化-丝绸之路（茶马古道贸易）
  { source: 44, target: 40, value: "外销支柱" }, // 瓷器-丝绸之路（主要出口商品）

  // 5. 特殊节点处理
  { source: 0, target: 5, value: "经院交流" }, // 伊斯兰学派-佛学（元代大都宗教辩论）
  { source: 0, target: 20, value: "航海技术" }, // 伊斯兰学派-郑和（使用阿拉伯航海技术）
  { source: 10, target: 37, value: "宫观建筑" }, // 全真教-故宫（参与北京城建规划）
  { source: 11, target: 45, value: "戏剧题材" }, // 全真教-京剧（《吕洞宾三戏白牡丹》剧目）
]);

// 图表配置
const option = ref({
  title: {
    text: "优秀文化传承图谱",
    top: 20,
    left: 18,
    textStyle: {
      color: "#2f4554",
    },
  },
  tooltip: {
    formatter: (params) => {
      if (params.dataType === "node") {
        return `${params.name}<br>${
          categories.value[params.data.category].name
        }`;
      }
      const sourceNode = nodes.value.find((n) => n.id === params.data.source);
      const targetNode = nodes.value.find((n) => n.id === params.data.target);
      return `${sourceNode?.name || "未知"} → ${
        targetNode?.name || "未知"
      }<br>关系：${params.data.value || "未定义"}`;
    },
  },
  // legend: {
  //   data: categories.value.map((c) => c.name),
  //   orient: "vertical",
  //   left: 20,
  //   top: 50,
  // },
  animationDuration: 2000,
  animationEasingUpdate: "quinticInOut",
  series: [
    {
      type: "graph",
      layout: "circular",
      roam: false,
      top: 100,
      bottom: 110,
      //   zoom:0.9,//大小
      circular: {
        rotateLabel: true,
      },

      data: nodes.value,
      links: links.value,
      categories: categories.value,
      focusNodeAdjacency: true,
      label: {
        show: true,
        position: "right",
        formatter: "{b}",
        fontSize: 14,
      },

      lineStyle: {
        color: "source",
        curveness: 0.3,
        // width: 2,//线的宽度
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
        },
        lineStyle: {
          width: 3,
        },
      },
    },
  ],
});
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .culture-graph {
    width: 100%;
    height: 100%;
  }
}
</style>
